<template>
	<view class="goods" v-if="data.goodsList.length > 0">
		<view class="goods-item" v-for="(item, index) in data.goodsList" :key="index" @click="goodsClick(item)">
			<image class="goods-img" :src="sheep.$url.cdn(item.image)"></image>
			<view class="goods-title">{{ item.title }}</view>
			<view class="goods-desc">
				<view class="share-sales">
					<view class="sales">已售{{ item.sales }}件</view>
				</view>
				<view class="desc"><span style="font-size: 24rpx;">¥</span>{{ item.price }}</view>
				<view class="shopInfo">
					<image mode="aspectFill" v-if="item.thumb !== ''" :src="sheep.$url.cdn(item.thumb)"></image>
					<image mode="aspectFill" v-else
						src="https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/storelevel/20250410/54cf8f23d18011b35a5d21159bfb31f9.png">
					</image>
					<view class="shopName">{{ item.store_name }}</view>
				</view>
				<view class="task" v-if="type == 'task'">
					购买套餐升级黄金店主
				</view>
			</view>
		</view>

		<view class="blank">我也是有底线的</view>
	</view>
	<s-empty class="nogoods" v-if="data.goodsList.length === 0" icon="/static/soldout-empty.png" text="暂无店铺"></s-empty>
	<su-popup :show="show" type="center" round="0" :isMaskClick="true" backgroundColor="transparent" @close="close">
            <view class="contents">
                <view class="cont">
                    <view class="title">温馨提示</view>
                    <view class="content">{{ `此商品不属于任务项` }}</view>
                </view>
               <div class="btns sa-flex sa-flex-between">
				<view class="btn" @click="goshop()">继续购买</view>
                <view class="btn cancelBtn" @click="show=false">放弃购买</view>
			   </div>
            </view>
        </su-popup>
</template>

<script setup>
import sheep from '@/sheep'
import { ref, reactive, onMounted } from 'vue';
const props = defineProps({
	data: {
		type: Object,
		default() { },
	},
	type: {
		type: String,
		default: ''
	},
	price: {
		type: Number,
		default: 0
	}

});
const show = ref(false);
const good=ref({})
function goodsClick(item) {
	show.value=true
	good.value=item
}
const close = () => {
    show.value = false
}
const goshop=()=>{
	// 老的逻辑跳转到店铺
	// uni.navigateTo({
	// 		url: '/pages/store/shop?id=' + good.value.store_id + '&price=' + good.value.price
	// 	})
	// 新的跳转到商品详情
	uni.navigateTo({
			url: '/pages/goods/index?id=' + good.value.id
		})
}
onMounted(() => {

	// console.log('s-goods:',props.data);
})

</script>

<style lang="scss" scoped>
view{
	box-sizing: border-box;
}

.contents {
    padding: 20rpx;
    width: 600rpx;
    height: 431rpx;
    background-image: url('https://xyh-static-app.oss-cn-hangzhou.aliyuncs.com/storage/default/20250408/839be2dd0fcc846e8a6b2b8f86e1d437.png');
    background-size: 100% 100%;
    position: relative;

    .cont {
        width: 100%;
        text-align: center;
        margin-top: 88rpx;
        padding: 0 70rpx;
		overflow: hidden;
        .title {
            font-size: 30rpx;
            font-weight: bold;
            color: #333;
            margin-bottom: 20rpx;
        }

        .content {
            width:433rpx;
            font-size: 28rpx;
            word-wrap: break-word;
        }
    }
	.btns{
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 54rpx auto;
    width: 433rpx;
	}
    .btn {
        width: 45%;
        padding: 20rpx;
        border-radius: 999999rpx;
        background: #426dfa;
        color: #fff;
        font-size: 28rpx;
        font-weight: bold;
        text-align: center;
        
    }
	.cancelBtn{
		background: #fff;
        color: #333;
		border: 2rpx solid #ccc;
	}
}
.goods {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: flex-start;
	// padding: 10rpx;
	width: calc(100% + 10rpx);

	.goods-item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: calc((100% - 20rpx) / 2);
		margin-top: 20rpx;
		background: #fff;
		display: flex;
		border-radius: 20rpx;

		.shopName {
			width: 76%;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.task {
			width: 100%;
			padding: 4rpx 10rpx;
			border-radius: 9999rpx;
			background: #9E9E9E;
			color: #fff;
			box-sizing: border-box;
			text-align: center;
			margin-top: 10rpx;
		}

		.goods-img {
			max-width: 100%;
			height: 350rpx;
			border-radius: 20rpx;
		}

		.goods-title {
			margin-top: 10rpx;
			width: 98%;
			// 移除 display: flex 相关属性
			height: 68rpx; // 增加高度以适应两行文字
			display: -webkit-box;
			-webkit-box-orient: vertical;
			-webkit-line-clamp: 2;
			overflow: hidden;
			text-overflow: ellipsis; // 添加省略号
			font-size: 30rpx; // 添加字体大小
			line-height: 35rpx; // 添加行高
		}

		.goods-desc {
			width: 100%;
			// display: flex;
			// flex-direction: row;
			// justify-content: space-between;
			// align-items: center;

			margin-top: 12rpx;
			padding-left: 20rpx;
			margin-bottom: 12rpx;

			.desc {
				font-family: Source Han Sans;
				font-size: 30rpx;
				// text-align: center;
				color: #f9363e;
				font-family: Source Han Sans;
				font-weight: 400;
				font-size: 28rpx;
				margin-top: 10rpx;

			}

			.share-sales {

				// display:flex;
				// flex-direction: row;
				// justify-content: flex-end;

				.sales {
					width: 160rpx;
					height: 38rpx;
					font-family: Source Han Sans;
					font-size: 26rpx;
					font-weight: normal;
					line-height: normal;

					letter-spacing: normal;
					color: #9E9E9E;
					margin-right: 22rpx;

					// display:flex;
					// justify-content: center;
					// align-items: flex-end;
				}

				.share {
					width: 33rpx;
					height: 33rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #D8D8D8;
					border-radius: 50%;
					margin-left: 10rpx;
					margin-right: 20rpx;
					margin-top: 8rpx;


					.share-img {
						width: 24rpx;
						height: 24rpx;
					}
				}
			}


		}

		.shopInfo {
			width: 100%;
			display: flex;
			justify-content: start;
			align-items: center;
			color: #9e9e9e;
			margin-top: 20rpx;
			image {
				width: 40rpx;
				height: 40rpx;
				border-radius: 50%;
				margin-right: 20rpx;
			}
		}

	}

	.goods-item:nth-child(2n-1) {
		margin-right: 10rpx;
		;
	}

}

.blank {
	height: 50rpx;
	width: 100%;
	text-align: center;
	margin: 40rpx auto;
}

.nogoods {
	padding: 40rpx;
	background: #fff;
	width: calc(100vw - 20rpx);
	box-sizing: border-box;
	text-align: center;
	display: flex;
	justify-content: center;
	align-items: center;
}
</style>